<template>
  <div>
    <ta-drawer :title="editType == '1'? '添加系统绑定':'编辑邮箱'" width="900" placement="right" :closable="true" @close="closeEdit" :visible="visible" destroyOnClose>
      <ta-border-layout :layout="{header:'105px'}">
        <div slot="header" >
          <div :style="{paddingBottom:'15px'}">
            <span>操作系统:</span>
            <ta-select allowClear placeholder="请选择操作系统" v-model="sys"  @change="changeSys" style="width: 220px" class="filter-name">
              <ta-select-option v-for="item in QuerySystemData()"
                                :key="item.value"
                                :value="item.value">
                {{item.label}}
              </ta-select-option>
            </ta-select>
          </div>
          <div>
            <span>渠道类型:</span>
            <ta-select allowClear placeholder="请选择渠道类型" v-model="channeltype"  @change="changeChannelType" style="width: 220px" class="filter-name">
              <ta-select-option v-for="item in CollectionData('CHANNELTYPE')"
                                :key="item.value"
                                :value="item.value">
                {{item.label}}
              </ta-select-option>
            </ta-select>
          </div>
        </div>
        <div >
          <div class="divBlock" >
            <span class="tableTitle">接入系统未绑定的渠道</span>
            <ta-table :columns="channelColumns"
                      :dataSource="bindingData1"
                      :rowSelection="rowSelection"
                      :pagination=false
                      bordered
            >
            </ta-table>
            <ta-pagination
              style="float: right; margin-top: 10px;"
              :dataSource.sync="bindingData1"
              :defaultPageSize="4"
              :params="pageParams1"
              url="msg/systemChannel/queryChannel"
              ref="gridPager1"
            >
            </ta-pagination>
          </div>
          <div style="display: inline-block;width: 15%;">
            <div style="padding-bottom: 15px;padding-top: 100px;padding-left:9px;height: 100%">
              <ta-button type="primary" size="small">批量删除</ta-button>
            </div>
            <div style="padding-bottom: 100px;padding-left:9px">
              <ta-button type="primary" size="small" >批量新增</ta-button>
            </div>
            <div style="padding-bottom: 15px;padding-left: 10px">
              <ta-button style="background-color: red;color:  #ebebeb"  >保存</ta-button>
            </div>
            <div style="padding-bottom: 100px;padding-left: 10px">
              <ta-button>取消</ta-button>
            </div>
          </div>
          <div class="divBlock" >
            <span class="tableTitle">接入系统已绑定的渠道</span>
            <ta-table :columns="channelColumns"
                      :dataSource="bindingData2"
                      :rowSelection="rowSelection"
                      :pagination=false bordered
            >
            </ta-table>
            <ta-pagination
              style="float: right; margin-top: 10px;"
              :dataSource.sync="bindingData2"
              :defaultPageSize="5"
              :params="pageParams1"
              url=""
              ref="gridPager2"
            >
            </ta-pagination>
          </div>
        </div>
      </ta-border-layout>
    </ta-drawer>
  </div>
</template>

<script>
import $api from '../api/index'
const formItemLayout = {
  labelCol: {span: 10},
  wrapperCol: {span: 19}
}
const channelColumns = [
  {title: '渠道名称', dataIndex: 'channelname', key: 'channelname', width: '100%', overflowTooltip: true}
]
const bindingData = [
  {key: 1, channelid: 'rewfty', channelname: '极光APP'},
  {key: 1, channelid: 'rewfty', channelname: '极光APP'},
  {key: 1, channelid: 'rewfty', channelname: '极光APP'},
  {key: 1, channelid: 'rewfty', channelname: '极光APP'},
  {key: 1, channelid: 'rewfty', channelname: '极光APP'},
  {key: 1, channelid: 'rewfty', channelname: '极光APP'},
  {key: 1, channelid: 'rewfty', channelname: '极光APP'},
  {key: 1, channelid: 'rewfty', channelname: '极光APP'}
]
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  }
}
export default {
  name: 'addOrEditSysBinding',
  props: ['visible', 'editType', 'rowData'],
  mounted () {
  },
  data () {
    return {
      formItemLayout,
      rowSelection,
      pagination: {},
      loading: false,
      sys: undefined,
      channeltype: undefined,
      channelColumns,
      bindingData1: [],
      bindingData2: []
    }
  },
  methods: {
    pageParams1 () {
      let param = {}
      if (this.channeltype != '') {
        param.channeltype = this.channeltype
      }
      return param
    },
    QuerySystemData () {
      $api.queryMsgSystem(this, null, (data) => {
        return data.data.msgSystemList
      })
    },
    loadChannelData () {
      this.$refs.gridPager1.loadData((data) => {
      })
    },
    closeEdit () {
      this.bindingData1 = []
      this.bindingData2 = []
      this.$emit('close')
    },
    loadData: function () {
      this.$refs.gridPager.loadData((data) => {
      })
    },
    changeSys () {
      this.loadData()
    },
    changeChannelType () {
      this.loadChannelData()
    }
  }
}
</script>

<style scoped type="text/scss">
 .divBlock{
   vertical-align:top;
   display: inline-block;
   width: 40%;
 }
  .tableTitle {
    display: block;
    text-align: center;
    font-size: 16px;
    padding-bottom: 3px;
  }
</style>
